<template>
	<form
		id="data-form-container"
		ref="form"
		class="data-form-container"
		@submit.prevent="handleSubmit"
	>
		<div class="form-item">
			<div class="input-area">
				<input
					type="text"
					placeholder="用户昵称"
					maxlength="10"
					v-model="formData.nickname"
				/>
				<span class="tip">{{ formData.nickname.length }}/10</span>
			</div>
			<div class="error">{{ error.nickname }}</div>
		</div>
		<div class="form-item">
			<div class="text-area">
				<textarea
					placeholder="输入内容"
					maxlength="300"
					v-model="formData.content"
				></textarea>
				<span class="tip">{{ formData.content.length }}/300</span>
			</div>
			<div class="error">{{ error.content }}</div>
		</div>
		<div class="form-item">
			<div class="button-area">
				<button :disabled="isSubmiting">
					{{ isSubmiting ? "提交中..." : "提交" }}
				</button>
			</div>
		</div>
	</form>
</template>

<script>
export default {
	data() {
		return {
			formData: {
				nickname: "",
				content: "",
			},
			error: {
				nickname: "",
				content: "",
			},
			isSubmiting: false,
		};
	},
	methods: {
		handleSubmit() {
			//判断用户是否输入
			this.formData.nickname.trim()
				? (this.error.nickname = "")
				: (this.error.nickname = "请输入昵称");
			this.formData.content.trim()
				? (this.error.content = "")
				: (this.error.content = "请输入内容");
			//有错误则返回
			if (this.error.content || this.error.nickname) {
				return;
			}
			this.isSubmiting = true;
			this.$emit("submited", this.formData, (msg) => {
				this.$showMessage({
					content: msg,
					type: "success",
					duration: 1000,
					container: this.$refs.form,
					callback: () => {
						this.formData.content = "";
						this.formData.nickname = "";
						this.isSubmiting = false;
					},
				});
			});
		},
	},
};
</script>

<style scoped lang="less">
@import "~@/styles/var.less";
.data-form-container {
	margin-bottom: 20px;
	overflow: hidden;
}
.form-item {
	margin-bottom: 8px;
}
.input-area {
	width: 50%;
	position: relative;
}
.text-area {
	position: relative;
}
.tip {
	position: absolute;
	right: 5px;
	bottom: 5px;
	color: #b4b8bc;
	font-size: 12px;
}
input,
textarea {
	display: block;
	width: 100%;
	box-sizing: border-box;
	border: 1px dashed @gray;
	outline: none;
	color: @words;
	font-size: 14px;
	border-radius: 4px;
	&:focus {
		border-color: @primary;
	}
}
input {
	padding: 0 15px;
	height: 40px;
}
textarea {
	resize: none;
	padding: 8px 15px;
	height: 120px;
}
.error {
	margin-top: 6px;
	color: @danger;
	font-size: 14px;
	height: 20px;
	line-height: 20px;
}
button {
	position: relative;
	cursor: pointer;
	border: none;
	outline: none;
	width: 100px;
	height: 34px;
	color: #fff;
	border-radius: 4px;
	background: @primary;
	&:hover {
		background: darken(@primary, 10%);
	}
	&:disabled {
		background: lighten(@primary, 20%);
		cursor: not-allowed;
	}
}
</style>
